﻿
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>信息填报系统</title>

    <meta th:http-equiv="${session.userInfo == null?'refresh':''}" th:content="${session.userInfo == null?'0;url=/Login':''}">

    <!-- UI 框架 -->
    <link href="/assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="/assets/css/materialdesignicons.min.css" rel="stylesheet">
    <link href="/assets/css/animate.css" rel="stylesheet">
    <!-- 自定义CSS样式 -->
    <link href="/assets/css/style.min.css" rel="stylesheet">

    <!-- 公用JS -->
    <script type="text/javascript" src="/assets/js/jquery.min.js"></script>
    <script type="text/javascript" src="/assets/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/assets/js/perfect-scrollbar.min.js"></script>
    <script type="text/javascript" src="/assets/js/main.min.js"></script>

    <!--消息提示-->
    <script src="/assets/js/bootstrap-notify.min.js"></script>
    <script src="/assets/js/lightyear.js"></script>

    <!-- 对话框 -->
    <script src="/assets/js/jconfirm/jquery-confirm.min.js"></script>
    <script type="text/javascript" src="/assets/js/layer/layer.js"></script>

</head>

<body>
<div class="lyear-layout-web">
    <div class="lyear-layout-container">
        <!--左侧导航-->
        <aside class="lyear-layout-sidebar">

            <!-- logo -->
            <div id="logo" class="sidebar-header">
                <a th:href="${session.homeHref}"><img src="/assets/images/ylogo.png" title="LOGO" alt="信息填报系统" /></a>
            </div>
            <div class="lyear-layout-sidebar-scroll">

                <nav class="sidebar-main">
                    <ul class="nav nav-drawer">
                        <li class="nav-item"> <a th:href="${session.homeHref}"><i class="mdi mdi-home"></i> 后台首页</a> </li>
                        <!-- 人员管理界面 -->
                        <li th:style="'display: '+ ${ session.userInfo.getRoles()==1?'':'none'}"
                            th:class="'nav-item nav-item-has-subnav '+${#strings.containsIgnoreCase(#httpServletRequest.requestURL,'/Teacher/')?'active open':''}">
                            <a href="javascript:void(0)"><i class="mdi mdi-menu"></i>人员管理</a>
                            <ul class="nav nav-subnav">
                                <li  th:class="${#strings.containsIgnoreCase(#httpServletRequest.requestURL,'/Teacher/Teacher')?'active':''}" > <a href="/Teacher/Teacher">教师管理</a> </li>
                                <li  th:class="${#strings.containsIgnoreCase(#httpServletRequest.requestURL,'/Teacher/Student')?'active':''}" > <a href="/Teacher/Student">学生管理</a> </li>
                            </ul>
                        </li>
                        <!-- 任务管理界面 -->
                        <li th:style="'display: '+ ${ session.userInfo.getRoles()!=2?'':'none'}"
                            th:class="${#strings.containsIgnoreCase(#httpServletRequest.requestURL,'/Task/')?'nav-item nav-item-has-subnav active open':'nav-item nav-item-has-subnav'}">
                            <a href="javascript:void(0)"><i class="mdi mdi-file-outline"></i>填报任务</a>
                            <ul class="nav nav-subnav">
                                <li  th:class="${#strings.containsIgnoreCase(#httpServletRequest.requestURL,'/Task/List')?'active':''}" > <a href="/Task/List">填报任务列表</a> </li>
                                <li  th:class="${#strings.containsIgnoreCase(#httpServletRequest.requestURL,'/Task/Add')?'active':''}" > <a href="/Task/Add">发布填报任务</a> </li>
                            </ul>
                        </li>
                        <!-- 填报模板管理界面 -->
                        <li th:style="'display: '+ ${ session.userInfo.getRoles()!=2?'':'none'}"
                            th:class="${#strings.containsIgnoreCase(#httpServletRequest.requestURL,'/Template/')?'nav-item nav-item-has-subnav active open':'nav-item nav-item-has-subnav'}">
                            <a href="javascript:void(0)"><i class="mdi mdi-menu"></i>填报模板</a>
                            <ul class="nav nav-subnav">
                                <li  th:class="${#strings.containsIgnoreCase(#httpServletRequest.requestURL,'/Template/List')?'active':''}" > <a href="/Template/List">填报模板列表</a> </li>
                                <li  th:class="${#strings.containsIgnoreCase(#httpServletRequest.requestURL,'/Template/Add')?'active':''}" > <a href="/Template/Add">新增填报模板</a> </li>
                            </ul>
                        </li>

                        <!-- 学生填报入口 -->
                        <li th:style="'display: '+ ${ session.userInfo.getRoles()==2?'':'none'}"
                            th:class="'nav-item nav-item-has-subnav '+${#strings.containsIgnoreCase(#httpServletRequest.requestURL,'/Report/')?'active open':''}">
                            <a href="javascript:void(0)"><i class="mdi mdi-table-edit"></i>填报数据</a>
                            <ul class="nav nav-subnav">
                                <li  th:class="${#strings.containsIgnoreCase(#httpServletRequest.requestURL,'/Report/List')?'active':''}" > <a href="/Report/List">待填报列表</a> </li>
                            </ul>
                        </li>
                    </ul>
                </nav>

                <div class="sidebar-footer">
                    <p class="copyright">Copyright &copy; 2020. All rights reserved：<a href="#">美丽女神组</a></p>
                </div>
            </div>

        </aside>
        <!--End 左侧导航-->

        <!--头部信息-->
        <header class="lyear-layout-header">

            <nav class="navbar navbar-default">
                <div class="topbar">

                    <div class="topbar-left">
<!--                        <div class="lyear-aside-toggler">-->
<!--                            <span class="lyear-toggler-bar"></span>-->
<!--                            <span class="lyear-toggler-bar"></span>-->
<!--                            <span class="lyear-toggler-bar"></span>-->
<!--                        </div>-->
                        <span class="mdi mdi-settings" style="color: #fff"> 系统：CentOS 8.1.1911
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <span class="mdi mdi-alarm">&nbsp;当前时间：<span id="showTime"></span></span></span>
                    </div>

                    <ul class="topbar-right">
                        <li class="dropdown dropdown-profile">
                            <a href="javascript:void(0)" data-toggle="dropdown">
<!--                                <img class="img-avatar img-avatar-48 m-r-10" src="/assets/images/users/avatar.jpg" alt="笔下光年" />-->
                                <span style="color: #33cabb" th:text="${session.userInfo.getUserName()}"> 用户名 <span class="caret"></span></span>
                            </a>
                            <ul class="dropdown-menu dropdown-menu-right">
<!--                                <li> <a href="/User/profile"><i class="mdi mdi-account"></i> 个人信息</a> </li>-->
                                <li> <a href="javascript:editPasswordModel()"><i class="mdi mdi-lock-outline"></i> 修改密码</a> </li>
                                <li> <a href="javascript:clearCache()"><i class="mdi mdi-delete"></i> 清空缓存</a></li>
                                <li class="divider"></li>
                                <li> <a href="/Logout"><i class="mdi mdi-logout-variant"></i> 退出登录</a> </li>
                            </ul>
                        </li>
                    </ul>

                </div>
            </nav>

        </header>
        <!--End 头部信息-->

        <!--页面主要内容-->
        <main class="lyear-layout-content">
            <div  class="container-fluid" th:include="::content">页面正文内容</div>
        </main>
        <!--End 页面主要内容-->
    </div>
</div>
<div id="editpasswd" hidden>
    <div class="card">
        <div class="card-body">
            <div class="form-group">
                <label class="col-xs-12" for="userInfoNo">姓名:</label>
                <input type="text" id="userInfoRoles" th:value="${session.userInfo.getRoles()}" style="display: none">
                <input type="text" id="userInfoNo" th:value="${session.userInfo.getAccount()}" style="display: none">
                <input th:value="${session.userInfo.getUserName()}"
                       class="form-control" type="text" name="userno"
                       disabled placeholder="请输入您的姓名">
            </div>

            <div class="form-group">
                <label class="col-xs-12" for="editpassword">密码 :<span id="editPasswordTips" hidden="hidden" style="margin-left: 12px;color: red;font-size: 8px">* 原密码不正确 </span></label>
                <input type="text" id="userInfoPasswd" th:value="${session.userInfo.getPassword()}" style="display: none">
                <input class="form-control" type="password" id="editpassword" name="editpassword" placeholder="请输入原密码">
            </div>

            <div class="form-group">
                <label class="col-xs-12" for="editnewpassword">新密码 :<span id="editNewPasswordTips" hidden="hidden" style="margin-left: 12px;color: red;font-size: 8px">* 新密码必须是6-12位 </span></label>
                <input class="form-control" type="password" id="editnewpassword" name="editnewpassword" placeholder="请输入新密码">
            </div>

            <div class="form-group">
                <label class="col-xs-12" for="editnewrepassword">新密码 :<span id="editNewRePasswordTips" hidden="hidden" style="margin-left: 12px;color: red;font-size: 8px">* 两次输入的密码不正确 </span></label>
                <input class="form-control" type="password" id="editnewrepassword" name="editnewrepassword" placeholder="请再次输入新密码">
            </div>

            <div class="form-group">
                <button id="btnSubmitForPassword" class="btn btn-block btn-round btn-primary" disabled="disabled" onclick="editPasswordSubmit()">提交</button>
            </div>
        </div>
    </div>
</div>

<script>

    function setTime() {
        let date = new Date();
        var HH = date.getHours(),
            MM = date.getMinutes();
        let SS = date.getSeconds();
        date = date.getDate();
        if (SS < 10) {
            SS = "0" + SS
        }
        $("#showTime").text(HH+":"+MM+":"+SS);
    }

    //设置时间间隔
    setInterval(setTime, 1000);


    let editUserInfoForPassword = false;
    let editUserInfoForRePassword = 0;

    $(function () {
        // 检查原密码是否正确
        $("#editpassword").change(function () {
            if ($("#userInfoPasswd").val() !== $(this).val() && ($(this).val().length >= 6 && 12 >= $(this).val().length)) {
                editUserInfoForPassword = false;
                $("#editPasswordTips").removeAttr("hidden")
            } else {
                editUserInfoForPassword = true;
                $("#editPasswordTips").attr("hidden", "hidden")
            }
        });

        $("#editnewpassword").change(function () {
            if ($(this).val().length >= 6 && $(this).val().length <= 12){
                editUserInfoForRePassword = 2;
                $("#editNewPasswordTips").attr("hidden", "hidden")
            } else {
                editUserInfoForRePassword = 1;
                $("#editNewPasswordTips").removeAttr("hidden")
            }
        });

        $("#editnewrepassword").on("input propertychange change",function(event){
            if (editUserInfoForRePassword < 2) {
                editUserInfoForRePassword = 0;
                $("#editNewRePasswordTips").text("* 请先输入正确格式的新密码");
                $("#editnewrepassword").removeAttr("hidden")
                $("#editNewPasswordTips").removeAttr("hidden")
            } else {
                $("#editNewRePasswordTips").text("* 两次输入的密码不正确 ");
                if ($(this).val() === $("#editnewpassword").val()) {
                    editUserInfoForRePassword = 3;
                    $("#editnewrepassword").attr("hidden", "hidden");
                    $("#editNewRePasswordTips").attr("hidden", "hidden");
                    $("#btnSubmitForPassword").removeAttr("disabled");
                } else {
                    editUserInfoForRePassword = 4;
                    $("#btnSubmitForPassword").attr("disabled", "disabled");
                    $("#editnewrepassword").removeAttr("hidden")
                }
            }
        });

    })


    function clearCache(){
        setTimeout(function () {
            lightyear.notify('清除完成', 'success', 1000);
        }, 3000)
    }

    function editPasswordModel() {
        layer.open({
            type: 1,
            title:'修改密码',
            skin: 'layui-layer-rim', //加上边框
            area: ['550px', '500px'], //宽高
            content: $('#editpasswd')
        });
    }



    function editPasswordSubmit() {

        if (!editUserInfoForPassword && 3 !== editUserInfoForRePassword){
            lightyear.notify('您，请稍候再试！！！', 'danger', 3000);
            return;
        }


        let userInfoPasswd = $("#userInfoPasswd").val()
        let passwd = $("#editpassword").val()

        if (passwd === userInfoPasswd){
            lightyear.loading("show")
            $.ajax({
                type: "POST",
                url: "/RePasswd",
                dataType: "json",
                data: {
                    "no": $("#userInfoNo").val()
                    ,"roles": $("#userInfoRoles").val()
                    ,"passwd": $("#editrepassword").val()
                },
                success: function (data, status) {
                    console.log(data)
                    lightyear.loading('hide');
                    if (status === "success") {
                        if (data.code === 200){
                            lightyear.notify('您成功保存(修改)了一位教师的信息', 'success', 500);
                            location.reload();
                        } else{
                            console.log("后端拒绝")
                            lightyear.notify(data.msg, 'danger', 3000);
                        }
                    }else{
                        console.log("网络问题")
                        lightyear.notify('网络不可用，请稍候再试！！！', 'danger', 3000);
                    }
                },
                error: function (xhr, errorText, errorType) {
                    lightyear.loading('hide');
                    lightyear.notify('服务器错误，请稍后再试~', 'danger', 2000);
                }
            });
        }else {
            lightyear.notify("您的密码错误，请改正后重试~", "danger")
        }

    }
</script>
</body>
</html>
